<div id="templateom">
    <p></p>
    <div>
        <form class="form-inline">
            <div class="form-group">
                <label for="templatelistname">模版名称</label>
                <input type="text" v-model="search.templateName" class="form-control" id="templatelistname">
            </div>
            <div class="form-group">
                <label for="templatelisttime1">模版创建时间</label>
                <input type="text" v-model="search.timeStart" class="form-control" id="templatelisttime1"> ~
                <input type="text" v-model="search.timeEnd" class="form-control" id="templatelisttime2">
            </div>
            <div class="form-group">
                <label for="exampletemplateStatus">状态</label>
                <select v-model="search.templateStatus" class="form-control" id="exampletemplateStatus"> ~
                    <option value="0">全部</option>
                    <option value="1">正常</option>
                    <option value="2">禁用</option>
                </select>
            </div>
            <input type="button" @click="doPage(1)" class="btn btn-default" value="查询" />
            <input type="button" @click="addTemplate" class="btn btn-default" value="新增模版" />
            <input type="button" @click="importTemplate" class="btn btn-default" value="导入模版" />
            <input type="button" @click="exportTemplate" class="btn btn-default" value="导出当前的模版列表" />
        </form>
    </div>
    <p></p>



    <div class="table-responsive">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>#</th>
                    <th>名称</th>
                    <th>状态</th>
                    <th>创建时间</th>
                    <th>最后修改时间</th>
                    <th>&nbsp;</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="t in pageInfo.data">
                    <td>{{t.templateId}}</td>
                    <td>{{t.templateName}}</td>
                    <td>{{t.templateStatus==1?'正常':'禁用'}}</td>
                    <td>{{formattime(t.createTime)}}</td>
                    <td>{{formattime(t.modifyTime)}}</td>

                    <td>
                        <a href="" @click.prevent="editTemplate(t.templateId)">编辑</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div id="pageBar">
        <page-bar :page="pageInfo.page" :start="pageInfo.pageStart" :end="pageInfo.pageEnd"
            :max-page-num="pageInfo.maxPageNum" @do-page="doPage($event)"></page-bar>
    </div>

</div>


<script>
    let app = Vue.createApp({
        data() {
            return {
                pageInfo: {},
                search: {
                    page: 1,
                    row: 10,
                    templateName: "",
                    timeStart: "",
                    timeEnd: "",
                    templateStatus: 0
                }
            }
        }, methods: {
            addTemplate() {
                showOrCheckTab("新增模版", "template-add.html");
            },
            editTemplate(tid) {
                //全局属性
                window.editTemplateId = tid;
                showOrCheckTab("编辑模版", "template-edit.html");
            },
            importTemplate() {
                showOrCheckTab("导入模版", "template-import.html");
            },
            exportTemplate() {
                exportTemplate(this)
            },
            searchTemplate() {

            },
            formattime(time) {
                var d = new Date(time);
                let str = d.getFullYear() + "年" + (d.getMonth() + 1) + "月" + d.getDate() + "日 " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
                return str;
            },
            doPage(pageNum) {
                this.search.page = pageNum;
                query(this);
            }
        }, mounted() {
            //查询数据
            query(this);
        }
    });
    //分页组件
    app.component("page-bar", {
        props: ["page", "start", "end", "maxPageNum"],// [当前页码，开始页码，结束页码]
        emits: ["doPage"],// 每个按钮上的事件
        template: `
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li>
                    <a href="#" @click.prevent="$emit('do-page',page-1)" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                    </li>
                    <li :class="{active:n==page}" v-for="n in (end-start+1)"><a href="#" @click.prevent="$emit('doPage',$event.target.text)">{{n+start-1}}</a></li>
                    <li>
                    <a href="#" @click.prevent="$emit('do-page',page+1)" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                    </li>
                </ul>
            </nav>
            `
    });
    app.mount("#templateom")

    function query(_this) {
        axios.get("http://localhost:8080/template/query", { params: _this.search })
            .then((res) => {
                _this.pageInfo = res.data
            });
    }

    function exportTemplate(_this) {
        let params = "";
        //
        var ps = Object.getOwnPropertyNames(_this.search);
        //
        for (let p of ps) {
            console.log(p);
            params += p + "=" + _this.search[p] + "&"
        }
        console.log(params);
        location.href = "http://localhost:8080/template/export?" + params.substr(0, params.length - 1);
    }

</script>